<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件化</title>
	</head>
	<body>
		<h1>组件化结构</h1>
		<div id="app">
				<!-- 1.需求 编辑一首静夜思 但是要求代码尽可能复用. 
							 实现策略: 组件化思想
						 2.组件化步骤:
								1.定义组件   
									全局组件: 任意的DIV都可以引入该组件
									局部组件: 只有特定的DIV可以引入组件
								2. 编辑组件的key(注意驼峰规则的写法)    
									 编辑组件体 特殊语法: 定义属性时 data(){return{ key:value}}
									 html标签: 使用template进行标记
								3.通过key对组件进行引用.
				 -->
				 
				 <!-- 1.组件标签的使用 放到app标签之内 才能解析
							2.如果采用驼峰规则命令则中间使用-线连接
					-->
				 <hello-com></hello-com>
				 <hello-com></hello-com>
				 <hello-com></hello-com>
				 
			</div>	
			
			<!-- 定义组件的模版html 
					 注意事项: 
							1.切记标识在app之外!!!!
							2.要求模版字符串必须有根标签 div		
			-->
			<template id="helloTem">
				<div>
					<h3>静夜思</h3>
					床前明月光，疑是地上霜。
					举头望明月，低头思故乡。
				</div>
			</template>
			
		
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			/* 1.定义组件 */
			Vue.component("helloCom",{
				
				template: "#helloTem"
			})
			
			
		
		
			const app = new Vue({
				el:	"#app",
				data: {
				},
				methods: {
					
				}
			})
		</script>
	</body>
</html>